import { Layout } from 'antd'
import SiderBar from '@/components/sideBar'
import HeaderBar from '@/components/header-bar'
import FooterBar from '@/components/footerBar'
import { SettingInitialState } from '@/redux/slices/setting.slice'
import { useGetState } from '@/hooks/useRedux'
import HistoryRouting from '@/components/historyRouting'
import { Outlet } from 'react-router-dom'
import { Suspense } from 'react'
import { Loading } from '@/components/assist'

export default function DefaultLayout() {
    const { fixedHeader, showFooter } = useGetState<SettingInitialState>('setting')

    return (
        <Layout>
            <SiderBar />
            <Layout className="default-layout">
                <HeaderBar />
                <HistoryRouting />
                <Layout.Content className={`mian-container ${fixedHeader ? 'fixed-herder' : ''}`}>
                    <Suspense fallback={<Loading />}>
                        <Outlet></Outlet>
                    </Suspense>
                </Layout.Content>
                {showFooter && <FooterBar />}
            </Layout>
        </Layout>
    )
}
